<template>
  <div>
      <img class="img" src="/static/images/timg.gif" >
    <div>
      <van-popup
        :show="show"
        position="bottom"
        @close="onClose"
      >
        <van-datetime-picker
          type="date"
          :value="currentDate"
          @input="onInput"
          :min-date="minDate "
          @confirm="sure"
        />
      </van-popup>
    </div>
    <div>
      <van-popup
        :show="show_grade"
        position="bottom"
        @close="onClose"
      >
        <van-picker :columns="columns" @change="onChange" />
      </van-popup>
    </div>
    <div class="select">
      <div class="select_time" @click="onshow">{{time}}</div>
      <div class="select_grade" @click="onshow_grade">{{value[0]}}{{value[1]}}</div>
    </div>
    <div class="t">
      <ListExam  v-for="(item, index) in test"
                     :key="index"
                     :test="item"
                     :index="index"
    />
    </div>


    </div>
</template>

<script>
  import ListExam from '@/components/history_list.vue'
  import HistoryListApi from '@/api/historyList'
  import { mapState } from 'vuex'

  const citys = {
    '一年级': ['语文', '数学', '英语'],
    '二年级': ['语文', '数学', '英语'],
    '三年级': ['语文', '数学', '英语'],
    '四年级': ['语文', '数学', '英语'],
    '五年级': ['语文', '数学', '英语'],
    '六年级': ['语文', '数学', '英语'],
    '初一': ['语文', '数学', '英语', '政治', '历史', '地理', '物理'],
    '初二': ['语文', '数学', '英语', '政治', '历史', '地理', '物理'],
    '初三': ['语文', '数学', '英语', '政治', '历史', '地理', '物理', '化学']
  }
  export default {
    name: 'history',
    data () {
      return {
        show: false,
        show_grade: false,
        columns: [
          {
            values: Object.keys(citys),
            className: 'column1'
          },
          {
            values: citys['一年级'],
            className: 'column2',
            defaultIndex: 4
          }
        ],
        test: [],
        index: '0',
        picker: '',
        value: ['请选择年级科目'],
        last_city: '一年级',
        currentDate: new Date().getTime(),
        minDate: new Date().getTime(),
        time: '时间',
        grade: '请选择年级科目'
      }
    },
    computed: {
      ...mapState(['examList', 'openId'])
    },
    mounted () {
      HistoryListApi.getHistoryList(this.openId)
        .then((resp) => {
          console.log('进入历史list')
          console.log(resp)
          this.test = resp
          this.$store.dispatch('getList', this.test)
        })
        .catch((error) => {
          console.log(error)
        })
    },
    methods: {
      onshow () {
        this.show = true
      },
      onshow_grade () {
        this.show_grade = true
      },
      onClose () {
        this.show = false
        this.show_grade = false
      },
      sure (event) {
        this.onClose()
      },
      onInput (event) {
        // console.log(event)
        this.currentDate = event.mp.detail.value
      },
      onChange (event) {
        // console.log(event)
        this.value = event.mp.detail.value
        // console.log(this.last_city)
        // eslint-disable-next-line eqeqeq
        if (this.value[0] != this.last_city) {
          this.columns[1].values = citys[this.value[0]]
          this.value[1] = citys[this.value[0]][0]
        }
        this.last_city = this.value[0]
      }
    },
    components: { ListExam }
  }
</script>

<style scoped>
  .ex_img{
    text-align: center;
    vertical-align: middle;
    border-bottom: 1rpx solid #eee;
  }

  .select{
    display: flex;
    padding: 5rpx;
    border-bottom: 1rpx solid#eee;
  }
  .select_time{
    margin-left: 40rpx;
    margin-right: 200rpx;
    height: 50rpx;
    width: 150rpx;
    border-color: black;
    border: 1rpx solid #eee;
  }
  .select_grade{
    height: 50rpx;
    width: 300rpx;
    border-color: black;
    border: 1rpx solid #eee;
  }
  .img{
    width: 100%;
  }

</style>
